<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <style type="text/css">
      #title {
        width: 100%;
        text-align: center;
        font-size: 2.5rem;
        font-weight: bold;
        line-height: 5rem;
        height: 5rem;
        letter-spacing: 0.75rem;
      }

      #contentView {
        height: calc(100vh - 5rem - 4rem);
        padding-top: 4rem;
      }

      #content {
        width: fit-content;
        margin: 0 auto;
        padding: 2rem 0;
        border-radius: 15px;
        border: 1px solid #ededed;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
        vertical-align: text-bottom;
      }

      #head {
        line-height: 4rem;
        height: 4rem;
        font-size: 1.5rem;
        text-align: center;
      }

      a {
        font-size: 0.75rem;
        position: relative;
        top: -10px;
      }

      .layui-form-item {
        padding-right: 50px;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="./css/layuiTheme.css" />
  </head>
  <body>


    <script src="./js/jQuery.main.js"></script>
    <script src="./js/main.js" type="text/javascript" charset="utf-8"></script>
    <script src="./layui/layui.js" charset="utf-8"></script>
    <img src="./img/bg.jpg" class="background">
    <div id="title">生产追溯系统</div>
    <div id="contentView">
      <div id="content">
        <div align="center">
          <img src="./img/logo.png">
        </div>
        <div id="head" style="flex-basis: 100%;">登录</div>
        <div class="layui-form-item">
          <div class="layui-block">
            <label class="layui-form-label"><i class="layui-icon" style="font-size: 30px;">&#xe66f;</i><b>：</b></label>
            <div class="layui-input-block">
              <input type="tel" id="login" lay-verify="required|phone" autocomplete="off" class="layui-input"
                placeholder="请输入登录名">
            </div>
          </div>
        </div>
        <div style="padding-right: 50px;text-align: right;">
          <a href="" onclick="zhuCe()">注册账号，请联系管理员</a>
        </div>
        <div class="layui-form-item">
          <div class="layui-block">
            <label class="layui-form-label"><i class="layui-icon" style="font-size: 30px;">&#xe683;</i><b>：</b></label>
            <div class="layui-input-block">
              <input type="password" id="psw" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
          </div>
        </div>
<!--        <div class="layui-form-item">-->
<!--          <div class="layui-block">-->
<!--            <label class="layui-form-label">验证码：</label>-->
<!--            <div class="layui-input-inline" style="margin-right: 0;">-->
<!--              <input type="text" id="captcha" lay-verify="required" placeholder="输入下方验证码" autocomplete="off" class="layui-input">-->
<!--              <img id="captchaImg" src="" style="width: 100%;" onclick="reloadCaptcha()">-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
        <div class="layui-form-item" style="text-align: center;">
          <div class="layui-input-block" style="margin-left: 60px;">
            <button type="submit" class="layui-btn " onclick="login()">登录</button>
          </div>
        </div>
        <div align="center" style="font-style:italic">@author-E-Mail:  zhoubb@fpe.com.cn</div>
      </div>
    </div>
    <script type="text/javascript">
      var layer;
	  layui.use('layer', function(){
		layer = layui.layer
	  })
/*
      reloadCaptcha();
*/

      function zhuCe() {
        alert("如需注册账号，请联系管理员！")
      }

      $(document).keydown(function (event) {
        if(event.keyCode==13){
          login()
        }
      })

      function login() {
        $.ajax({
          url: url + '/sys-user/login',
          method: 'POST',
          contentType: 'application/json',
          data: JSON.stringify({
            loginName: $('#login').val(),
            password: $('#psw').val()
          }),
          success: function(res) {
            console.log(res);
            if (res.code != 200) {
              layer.alert(res.msg);
              reloadCaptcha();
            } else {
              sessionStorage.setItem('userId',res.data.userId)
              sessionStorage.setItem('loginName',res.data.loginName)
              location.href = 'adminIndex.html';
            }
          }
        })
      }

      /*function reloadCaptcha() {
        $.ajax({
          url: url + '/sys-user/captcha.jpg',
          // 把接收到的图片转成二进制
          xhr: function() {
            var xhr = new XMLHttpRequest()
            xhr.responseType = 'blob'
            return xhr
          },
          success: function(res) {
            var img = document.getElementById('captchaImg');
            var url = window.URL || window.webkitURL;
            img.src = url.createObjectURL(res);
          }
        })
      }*/
    </script>
  </body>
</html>
